<template>
	<view>
		<!-- 头像 -->
		<view class="cell">
			<van-row>
				<van-col span="1">
					<view class="" style="height: 2rpx;"></view>
				</van-col>
				<van-col span="5">
					<text>头像</text>
				</van-col>
				<van-col span="18">
					<view class="" style="margin: auto;">
						<image :src="userInfo.avatarUrl" mode=""></image>
					</view>
				</van-col>
			</van-row>
		</view>
		<view class="divide" style="width: 95%; margin:auto;height: 2rpx;background-color: #DCDEE0"></view>
		<!-- 昵称 -->
		<view class="cell">
			<van-row>
				<van-col span="1">
					<view class="" style="height: 2rpx;"></view>
				</van-col>
				<van-col span="5">
					<text>昵称</text>
				</van-col>
				<van-col span="18">
					<view class="" style="margin: auto;">
						<text>{{userInfo.nickName}}</text>
					</view>

				</van-col>
			</van-row>
		</view>
		<view class="divide" style="width: 95%; margin:auto;height: 2rpx;background-color: #DCDEE0"></view>
		<!-- 姓名 -->
		<view class="cell">
			<van-row>
				<van-col span="1">
					<view class="" style="height: 2rpx;"></view>
				</van-col>
				<van-col span="5">
					<text style="color: red;">*</text><text>姓名</text>
				</van-col>
				<van-col span="18">
					<view class="">
						<van-field size="large" :value="userData.name" placeholder="请输入用户名(必填)" border="false"
							@change="onChange" data-type="name"/>
					</view>
				</van-col>
			</van-row>
		</view>
		<view class="divide" style="width: 95%; margin:auto;height: 2rpx;background-color: #DCDEE0"></view>
		<!-- 手机号 -->
		<view class="cell">
			<van-row>
				<van-col span="1">
					<view class="" style="height: 2rpx;"></view>
				</van-col>
				<van-col span="5">
					<view class="">
						<text style="color: red;">*</text><text>手机号</text>
					</view>
				</van-col>
				<van-col span="18">
					<view class="" style="margin: auto;">
						<van-field size="large" :value="userData.teleNumber" placeholder="请输入手机号(必填)" border="false"
						:error-message="phoneErr"	@change="onChange" data-type="teleNumber" />
					</view>
				</van-col>
			</van-row>
		</view>
		<view class="divide" style="width: 95%; margin:auto;height: 2rpx;background-color: #DCDEE0"></view>
		<!-- 机构 -->
		<view class="cell">
			<van-row>
				<van-col span="1">
					<view class="" style="height: 2rpx;"></view>
				</van-col>
				<van-col span="5">
					<text style="color: red;">*</text><text>机构</text>
				</van-col>
				<van-col span="18">
					<view class="" style="margin: auto;">
						<view class="">
							<van-field size="large" :value="userData.orgName" placeholder="请输入机构名" border="false"
								@change="onChange" data-type="orgName"/>
						</view>
					</view>
				</van-col>
			</van-row>
		</view>
		<!-- 
		<view class="divide" style="width: 95%; margin:auto;height: 2rpx;background-color: #DCDEE0"></view>
		 -->
		<!-- 邮箱 已废弃-->
		<!-- <view class="cell">
			<van-row>
				<van-col span="1">
					<view class="" style="height: 2rpx;"></view>
				</van-col>
				<van-col span="5">
					<text style="color: red;">*</text><text>邮箱</text>
				</van-col>
				<van-col span="18">
					<view class="" style="margin: auto;">
						<van-field size="large" :value="userData.email" placeholder="请输入邮箱" border="false" @change="onChange"
						:error-message="emailErr"	data-type="email" />
					</view>
				</van-col>
			</van-row>
		</view>
		<view class="divide" style="width: 95%; margin:auto;height: 2rpx;background-color: #DCDEE0"></view>
		 -->
		<!-- 验证码 已废弃-->
		<!-- <view class="cell">
			<van-row>
				<van-col span="1">
					<view class="" style="height: 2rpx;"></view>
				</van-col>
				<van-col span="5">
					<text style="color: red;">*</text><text>验证码</text>
				</van-col>
				<van-col span="18">
					<view class="" style="margin: auto; padding-right: 5%;">
						<van-field
						    :value="code"
							data-type="code"
						    center
						    clearable
						    @change="onChange"
						    placeholder="请输入短信验证码"
						    border=" false "
						    use-button-slot
						  >
						    <van-button @click="sendCode" v-if="userData.email&&!btnTime" slot="button" size="small" type="info">
						      发送验证码
						    </van-button>
							<van-button v-else-if="!userData.email" disabled slot="button" size="small" type="info">
							  发送验证码
							</van-button>
							<van-button  loading :loading-text="btnTime" v-else disabled slot="button" size="small" type="info">
							  
							</van-button>
						  </van-field>
					</view>
				</van-col>
			</van-row>
		</view> -->
		

		<view class="save_click">
			<van-button  @click="saveInfo" custom-style="width:96% ;border-radius:10rpx;" type="info">保存</van-button>
			<!-- <van-button v-else disabled custom-style="width:96% ;border-radius:10rpx;" type="info">保存</van-button> -->
		</view>
		
		<!-- 轻提示 -->
		<van-toast id="van-toast" />
		<!-- 弹出框 -->
		<van-dialog id="van-dialog" />
	</view>
</template>

<script>
	import wrap from '@/components/wrap';
	import Dialog from '../../wxcomponents/vant/dialog/dialog';
	import Toast from '../../wxcomponents/vant/toast/toast';
	export default {
		data() {
			return {
				userInfo: {
					name: "cU4oral6",
					topimage: "https://tva1.sinaimg.cn/crop.548.144.424.424.180/bb70fc68jw8faa3ha8qktj21400p0tpo.jpg?KID=imgbed,tva&Expires=1635838399&ssig=cGmptsFNbR",
					txt: "同谓之玄，玄之又玄，众妙之门"
				},
				userData:{
					
				},
				phoneErr:"",
				emailErr:"",
				code:"",
				btnTime:0,
				email:""
			}
		},
		methods: {
			//发送验证码（已废弃）
			sendCode(){
				uni.request({
				    url: this.apiurl + '/user/security_code', 
					method:"GET",
					data:{
						"email":this.userData.email
					},
				    header: {
				        'Authorization': uni.getStorageSync('token') //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res)
						if(res.data.status==1){
							Toast.success('发送成功，请去邮箱获取验证码');
							
						}else{
							Toast.fail('绑定邮箱不存在或获取验证码频繁，请等待');
						}
						this.btnDown()
				    }
				});
				
			},
			//伪动态绑定
			onChange(event){
				console.log(event)
				switch(event.target.dataset.type){
					case "email":this.userData.email = event.detail;
					let pattern = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
						str = event.detail;
					if(!pattern.test(str)) this.emailErr="邮箱格式错误";
					else this.emailErr=""
					break;
					case "name":this.userData.name = event.detail;break;
					case "orgName":this.userData.orgName = event.detail;break;
					case "teleNumber":this.userData.teleNumber = event.detail;
					pattern =  /[0-9-()（）]{11}/,
						str = event.detail;
					if(!pattern.test(str))this.phoneErr="手机号格式错误";
					else this.phoneErr="";
					break;
					case "code":this.code = event.detail;break;
				}
			},
			//uuid
			uuid() {
			    var s = [];
			    var hexDigits = "0123456789abcdef";
			    for (var i = 0; i < 36; i++) {
			        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
			    }
			    s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
			    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
			    s[8] = s[13] = s[18] = s[23] = "-";
			 
			    var uuid = s.join("");
			    return uuid;
			},
			
			//更改个人信息
			saveInfo(){
				//身份信息更改
				uni.request({
				    url: this.apiurl + '/user/user_info', 
					method:"PUT",
					data:{
						"email":this.uuid()+'@531.com',
						"name":this.userData.name,
						"orgName":this.userData.orgName,
						"teleNumber":this.userData.teleNumber
					},
				    header: {
				        'Authorization': uni.getStorageSync('token') //自定义请求头信息
				    },
				    success: (res) => {
						console.log(res)
						if(res.data.status){
							this.getinfo();
							Dialog.confirm({
							  title: '保存成功',
							  message: '是否跳转到主页',
							})
							  .then(() => {
							    // on confirm
								uni.switchTab({
								    url: '/pages/index/index'
								});
				
							  })
							  .catch(() => {
							    // on cancel
							  });
						}else{
							Toast.fail('参数缺失或未修改');
						}
				        
				    }
				});
				//邮箱验证  已废弃
				// uni.request({
				//     url: this.apiurl + '/user/check_code', 
				// 	method:"GET",
				// 	data:{
				// 		"securityCode":this.code
				// 	},
				//     header: {
				//         'Authorization': uni.getStorageSync('token') //自定义请求头信息
				//     },
				//     success: (res) => {
				// 		console.log(res)
						
				//     }
				// });
				
				
			},
			//按钮倒计时
			btnDown(){
				this.btnTime = 180;
				var t = setInterval(()=>{
					this.btnTime -= 1;
					// console.log(this.btnTime)
					if(this.btnTime == 0)
					clearInterval(t)
				},1000)
			},
			//获取个人信息
			getinfo() {
				//获取缓存昵称头像
				try {
					const token = uni.getStorageSync('token');
					const userInfo = uni.getStorageSync('userInfo');
					console.log("获取信息成功")
					if (token) {
						this.token = token;
					}
					if (userInfo) {
						this.userInfo = userInfo;
						console.log(userInfo)
					}
				} catch (e) {
					// error
				}
				//获取用户信息
				uni.request({
				    url: this.apiurl + '/user/user_info', //仅为示例，并非真实接口地址。
				    header: {
				        'Authorization': uni.getStorageSync('token') //自定义请求头信息
				    },
				    success: (res) => {
				        this.userData = res.data.data;
						console.log(this.userData)
						
				    }
				});
			}
		},
		onLoad() {
			//获取用户信息
			this.getinfo();
			//获取登陆状态,因为此页需要提交用户名，故不做验证
			// this.checkLogin();
			// uni.redirectTo({url:'/pages/welcome/welcome'})


		}
	}
</script>

<style>
	.cell {
		background-color: #fff;
		height: 120rpx;
	}

	.cell text {
		line-height: 120rpx;
	}

	.cell image {
		height: 108rpx;
		width: 108rpx;
		margin-top: 6rpx;
	}

	.save_click {
		width: 100%;
		padding-left: 2%;
		padding-right: 2%;
		margin-top: 40rpx;

	}

	.cell input {
		line-height: 120rpx;
		height: 120rpx;
	}

	.van-cell {
		padding: 0 !important;
	}
	.van-field__error-message ,.van-field__error{
		position: absolute;
		bottom: 0rpx;
	}
</style>
